<template>
	<div>
		<div style="font-size: 20px;">学历平均工资(元)</div>
		<dv-active-ring-chart :config="conf" style="width:100%;height:100%;top: -10px;" />
	</div>
</template>

<script setup>
import { ListEducate } from "@/api/screen/educate.js";
import { ref, onMounted } from 'vue';

const conf = ref({
	lineWidth: 24,
	//数字颜色和大小
	digitalFlopStyle: {
		fill: 'white',
		fontSize: 20,
	},
	data: [],
	// digitalFlopToFixed: 2,  //小数位数
	textColor: "white",
	radius: "70%",  //环的半径
	activeRadius: "75%",  //活动半径
	activeTimeGap: 3000, //默认切换速度
	showOriginValue: true,
  digitalFlopToFixed: 2,
  digitalFlopUnit: "元"
})
onMounted(async () => {
	await handleInitData()
})
async function handleInitData() {
	const response = (await ListEducate()).data;
	// console.log(response)

	conf.value.data = response.sort((a, b) => a.monthSalary - b.monthSalary).map(item => ({
		name: item.educateName,
		value: item.monthSalary
	}));

}


</script>

<style></style>